import { ShElement } from './ShElement'
import * as shlib from '../shlib/browser'

export class ShIcon extends ShElement {

    private _$svg: SVGElement

    constructor(svg: string, style?: Record<string, string> | string) {
        super()

        this.$shadow.innerHTML = `
            <style>
                :host {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            </style>
        ` + svg

        this._$svg = this.$shadow.querySelector('svg')!

        if (style)
            this.setStyle(style)
    }

    public setStyle(style: shlib.CssObject | string) {
        if (shlib.isString(style))
            style = shlib.parseCssText(style)

        if (style.width)
            this._$svg.setAttribute('width', style.width)
        if (style.height)
            this._$svg.setAttribute('height', style.height)
        if (style.stroke)
            for (let $ch of this._$svg.children)
                if ($ch.getAttribute('stroke') !== '#FFF')
                    $ch.setAttribute('stroke', style.stroke)
        if (style.fill)
            for (let $ch of this._$svg.children)
                $ch.setAttribute('fill', style.fill)
    }
}
customElements.define('sh-icon', ShIcon)